<template>
    <el-table :data="props.list" border style="width: 100% " size="large" row-class-name="row_name"  :header-cell-style="{
            textAlign: 'center',
            height: '42px',
			background: '#e9f2fa',
        }">
        <el-table-column label="缩略图"  align="center" >
            <template #default="scope">
                <img :src="scope.row.image_url" alt="" onerror="javascript:this.src='https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'" class="thumbnail">
            </template>
        </el-table-column>
        <el-table-column prop="title" label="海报名称" width="500"  align="center" />
        <el-table-column label="所属样式"  align="center" width="300">
            <template #default="scope">
               {{ scope.row.type==1?"样式一":"样式二" }}
            </template>
        </el-table-column>
        <el-table-column label="操作"  align="center" width="200">
            <template #default="scope">
                <el-button type="success" @click="handleEdit(scope.row)">编辑 </el-button>
                <el-button  type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script lang="ts" setup>
import { reload } from "@/utils/flushed"
import { delete_posters_list } from "@/request/api/system.ts"
const props = defineProps(["list"])
const emits = defineEmits(["change"])
const handleEdit = (row:any)=>{
    emits("change",row)
}
const handleDelete =async (row:any)=>{
    console.log(row,"删除");
    let data = await delete_posters_list({id:row.id})
    if (data.code == 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        reload()
    }else{
        ElMessage.error(data.message)
    }
}

</script>
<style lang="scss" scoped>
	:deep(.cell){
	    color:#5e6d82 ;
	    font-size: 13px;
	}
	:deep(thead){
	    .cell{
	        color:#1f2f3d ;
	        font-size: 14px;
	        font-weight: 650;
	    }
	}
.thumbnail {
    width: 120px;
    height: 60px;
    object-fit: contain;
}
:deep(.row_name){
   height: 42px !important;
}
:deep(.el-table__cell){
    padding: 0;
}
</style>